<template>

    <div class="net_weight" @dblclick="setZero"><span>净重/kg：</span><span class="num">{{ weight }}</span></div>



    <el-popover placement="bottom" title="" :width="200" trigger="click" effect="dark">
        <template #reference>
            <div class="tare_weight" @dblclick="handleTare"><span>皮重/kg：</span><span class="num">{{
        tare
    }}</span><el-icon>
                    <ArrowDown />
                </el-icon></div>
        </template>
        <template #default>
            <div class="btns_group">
                <el-button type="" size="large" @click="handleTare('')">称重去皮</el-button>
                <el-button type="" size="large" @click="isShowCommonTareDialog = true">常用皮重</el-button>
                <el-button type="" size="large" @click="isShowCountKeyboard = true">数字去皮</el-button>
            </div>

        </template>

    </el-popover>

    <!--常用皮重列表-->

    <el-dialog v-model="isShowCommonTareDialog" title="请选择皮重(kg)" width="900">
        <div class="tare_dialog_main">
            <div class="tare_wrap">

                <el-button @click="currentPageNo--" :disabled="currentPageNo <= 1" v-show="currentPageNo > 1"
                    class="page_btn prev" :icon="ArrowLeftBold"></el-button>

                <div class="tare_list">

                    <el-button size="large" @click="changeTare(item, index)"
                        :type="currentTare?.id === item.id ? 'primary' : ''"
                        v-for="(item, index) in currentTareData[currentPageNo - 1]" :key="item.id"
                        :class="{ active: currentTare?.id === item.id }" class="item">
                        <div>{{ item.name }}({{ item.weight }})</div>
                    </el-button>
                </div>
                <el-button @click="currentPageNo++"
                    :disabled="currentPageNo >= Math.ceil(currentTareData.flat().length / pageSize)"
                    v-show="currentPageNo < Math.ceil(currentTareData.flat().length / pageSize)" class="page_btn next"
                    :icon="ArrowRightBold"></el-button>
            </div>
            <el-button size="large" type="primary" @click="confirmTare" style="width: 100%;">
                确定
            </el-button>
        </div>
        <!-- <template #footer>
            <div class="dialog-footer">

               
            </div>
        </template> -->

    </el-dialog>
    <!--数字键盘(输入数量、重量)-->
    <CountKeyboard class="weightandtare_count_keyboard" placeholder="请输入皮量" v-model="isShowCountKeyboard"
        keyboardContainerClass="weightandtare_count_container" @onConfirm="onConfirmCountOrWeight"
        ref="weightandtareSaleCountKeboardRef" title="请输入皮量(kg)" />
</template>



<script setup lang="ts">
// @ts-nocheck
import { ref, computed } from 'vue'
import { paginateData } from '@renderer/utils'
import { ArrowDown, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@renderer/store/user'
import { storeToRefs } from 'pinia'
import CountKeyboard from './CountKeyboard.vue'
const userStore = useUserStore()
const { weight, tare, tareList } = storeToRefs(userStore)
const isShowCommonTareDialog = ref(false)
const currentPageNo = ref(1)
const currentTare = ref(null)
const pageSize = ref(8)
const isShowCountKeyboard = ref(false)
//
const currentTareData = computed(() => {
    return paginateData(tareList.value, pageSize.value) || []

})
function changeTare(item) {
    currentTare.value = item
}
function confirmTare() {
    if (!currentTare.value) {
        ElMessage({
            message: '请选择皮重',
            type: 'warning'
        })
        return false
    }
    handleTare(currentTare.value.weight)
    isShowCommonTareDialog.value = false
}
//去皮
async function handleTare(count) {
    // console.log('handleTare')
    // console.log(count)
    try {
        //如果传递重量 则皮重显示为该重量 ，如果传递空字符串 则表示实物去皮操作
       const tare = await window.electron.ipcRenderer.invoke('send-tare', count)
        ElMessage({
            message: '去皮成功',
            type: 'success'
        })
        userStore.setTare(tare)
    } catch (error) {
        ElMessage({
            message: '去皮失败',
            type: 'error',
        })
    }
}

//置零
async function setZero() {
    try {
        //如果传递重量 则皮重显示为该重量 ，如果传递空字符串 则表示实物去皮操作
      const res =  await window.electron.ipcRenderer.invoke('send-zero')
        ElMessage({
            message: '置零成功',
            type: 'success'
        })
    } catch (error) {
        ElMessage({
            message: '置零失败',
            type: 'error',
        })
    }

}

function onConfirmCountOrWeight(val) {

    handleTare(val)
    isShowCountKeyboard.value = false

}
</script>

<style lang="scss" scoped>
.net_weight {
    line-height: 40px;
    height: 40px;
    font-size: 20px;

    .num {
        color: var(--el-color-success);
    }
}

.tare_weight {
    line-height: 40px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;

    .num {
        color: var(--el-color-danger);
    }
}

.btns_group {
    :deep(.el-button) {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
}

.tare_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .tare_list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        flex: 1;
        margin: 0 10px;
    }

    .page_btn {
        height: 90px;
    }
}
</style>